import React, { FC, useState } from "react";
import { Outlet, useLocation, useNavigate } from "react-router-dom";
import styles from "./ManageLayout.module.scss";
import { Button, Divider, Space } from "antd";
import { message } from "antd";
import { createQuestionService } from "../services/question";
import {
  DeleteOutlined,
  PlusOutlined,
  StarOutlined,
  UnorderedListOutlined,
} from "@ant-design/icons";
import {
  MANAGE_LIST_PATH,
  MANAGE_TART_PATH,
  MANAGE_TRASH_PATH,
  QUESTION_EDIT_PATH,
} from "../router";
import { useRequest } from "ahooks";
//这个组件的存在是为了页面而存在的，因为每个页面存在相同的东西，所以使用layout进行复用
//  br标签是换行
const ManageLayout: FC = () => {
  const nav = useNavigate();
  const loc = useLocation();
  // const [loading,setLoading] = useState(false);
  //对异步有了一定的理解,当一个程序串行执行的时候,不想关的操作可以先执行,其他的可以异步执行.
  // async  function handlerCreateClick(){
  //     setLoading(true);
  //     const resDataTypePromise = await  createQuestionService();
  //     const {id} =resDataTypePromise || {};
  //     //如果问卷创建成功直接导航到编辑页导航到编辑页
  //     if (id) {
  //         nav(`${QUESTION_EDIT_PATH}${id}`)
  //         message.success("创建成功")
  //     }
  //     setLoading(false);
  //  }

  //一般发起网络请求就交给他
  //点击事件发起网络请求
  // createQuestionService  这个是请求的rest api 接口服务
  const {
    loading,
    error,
    run: handlerCreateClick,
  } = useRequest(createQuestionService, {
    manual: true,
    onSuccess(res){
      // const {id} =res || {};
      nav(`${QUESTION_EDIT_PATH}${res.id}`)
      message.success("创建成功")
    }
  });

  // console.log(loc.pathname+"???")
  return (
    <div className={styles.container}>
      <div className={styles.leftManagelayout}>
        <Space direction={"vertical"}>
          <Button
            type={"primary"}
            icon={<PlusOutlined />}
            onClick={handlerCreateClick}
            disabled={loading}
          >
            创建问卷
          </Button>
          <Divider
            style={{ margin: "10px 0", borderTopColor: "transparent" }}
          />
          <Button
            type={
              loc.pathname.startsWith(MANAGE_TART_PATH) ? "primary" : "default"
            }
            icon={<StarOutlined />}
            onClick={() => {
              nav(MANAGE_TART_PATH);
            }}
          >
            标星问卷
          </Button>
          <Button
            type={
              loc.pathname.startsWith(MANAGE_LIST_PATH) ? "primary" : "default"
            }
            icon={<UnorderedListOutlined />}
            onClick={() => {
              nav(MANAGE_LIST_PATH);
            }}
          >
            我的问卷
          </Button>

          <Button
            type={
              loc.pathname.startsWith(MANAGE_TRASH_PATH) ? "primary" : "default"
            }
            icon={<DeleteOutlined />}
            onClick={() => {
              nav(MANAGE_TRASH_PATH);
            }}
          >
            回收站
          </Button>
        </Space>
      </div>
      <div className={styles.rightContent}>
        <Outlet></Outlet>
      </div>
    </div>
  );
};

export default ManageLayout;
